<template>
  <el-form ref="postForm" :model="content" label-width="80px">
    <Sticky :class-name="'sub-navbar'">
      <div class="web-title">首页设置</div>
    </Sticky>
    <div class="web-index-container">
      <el-divider content-position="center">图文设置</el-divider>
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题">
            <el-input
              v-model="content.imageText.title"
              placeholder="请输入标题"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="图片">
            <el-col :span="5">
              <image-upload
                :drag="false"
                :list-type="listType"
                @onSuccess="onUploadSuccess"
                @onRemove="onUploadRemove"
              />
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="图片路径">
            <el-input
              v-model="content.imageText.image_url"
              placeholder="请上传图片获取图片路径"
              :readonly="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="链接">
            <el-input
              v-model="content.imageText.link"
              placeholder="请输入内容简介"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="简介">
            <el-input
              v-model="content.imageText.brief_info"
              type="textarea"
              :rows="5"
              placeholder="请输入内容简介"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="center">内容列表</el-divider>
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题">
            <el-input
              v-model="content.textList.title"
              placeholder="请输入标题"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="简介">
            <el-input
              v-model="content.textList.brief_info"
              placeholder="请输入简介"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="链接地址">
            <el-input
              v-model="content.textList.link"
              placeholder="请输入链接地址"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-collapse>
            <el-collapse-item>
              <template slot="title">
                <div style="width: 100%; text-align: center">展开列表设置</div>
              </template>
              <el-table :key="tabKey" :data="content.textList.children" border>
                <el-table-column
                  type="index"
                  align="center"
                  width="50"
                />
                <el-table-column
                  label="标题"
                  prop="title"
                  align="center"
                  width="150"
                />
                <el-table-column
                  label="链接"
                  prop="link"
                  align="center"
                  width="300"
                />
                <el-table-column
                  label="简介"
                  prop="brief_info"
                  align="center"
                  width="700"
                />
                <el-table-column align="center">
                  <template slot-scope="item">
                    <el-button type="primary" icon="el-icon-edit" size="mini" plain @click="editTextList(item.$index, item.row)">修改</el-button>
                    <el-button v-waves type="danger" size="mini" icon="el-icon-delete" plain @click="removeTextList(item.$index)"> 删除 </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-form ref="textListForm" v-model="textListChildren" label-width="80px">
                <el-row style="margin-top: 20px">
                  <el-col :span="12">
                    <el-form-item label="标题">
                      <el-input v-model="textListChildren.title" placeholder="请输入标题" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="链接">
                      <el-input v-model="textListChildren.link" placeholder="请输入链接地址" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="简介">
                      <el-input v-model="textListChildren.brief_info" type="textarea" rows="5" placeholder="请输入简介" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" style="text-align: center">
                    <el-button v-waves type="danger" plain size="mini" @click="addTextListChildren()">新增</el-button>
                    <el-button v-waves type="primary" plain size="mini" @click="submitTextListChildren()">确认</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-collapse-item>
          </el-collapse>

        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="text-align: center; margin-top: 20px">
          <el-button v-waves type="primary" :loading="isSubmit" @click="submitForm()">确认提交</el-button>
        </el-col>
      </el-row>
    </div>
  </el-form>
</template>

<script>
import Sticky from '@/components/Sticky/index'
import imageUpload from '../../components/ImageUpload/index'
import { removeSingleImage } from '@/api/upload-image'
import waves from '@/directive/waves/waves'
import { updateIndex, findInfo } from '../../api/web-index'
export default {
  components: { Sticky, imageUpload },
  directives: { waves },
  data() {
    return {
      tabKey: 1,
      content: {
        imageText: {
          brief_info: '',
          image_url: '',
          link: '',
          title: ''
        },
        textList: {
          title: '',
          brief_info: '',
          link: '',
          children: [
            { title: '测试数据', link: 'http://www.baidu.com', brief_info: '全场景、全渠道的客户联络，客户在哪里，服务和营销就做到哪里；让客户永远在对的时间、对的地点、对的方式与对的人沟通！' }
          ]
        }
      },
      listType: '',
      isSubmit: false,
      textListChildren: {
        title: '',
        link: '',
        brief_info: ''
      },
      textListChildrenNum: ''
    }
  },
  mounted() {
    this.handleList()
  },
  methods: {
    onUploadSuccess(urlFile, file) {
      this.content.imageText.image_url = urlFile
      console.log(this.isRemoveImage)
    },
    onUploadRemove() {
      const postData = {
        'file': this.content.imageText.image_url
      }
      removeSingleImage(postData).then(response => {
        const { message, status } = response
        if (status === 1) {
          this.$message({
            message: '图片删除成功',
            type: 'success'
          })
          this.isSubmit = false
          this.content.imageText.image_url = ''
        } else {
          this.$message({
            message: message,
            type: 'error'
          })
        }
      })
    },
    submitForm() {
      const postDate = {
        postDate: {
          title: '首页1',
          content: this.content
        }
      }
      updateIndex(postDate).then((response) => {
        const { message } = response
        this.$message({
          type: 'success',
          message: message
        })
      })
    },
    handleList() {
      findInfo().then((response) => {
        const { content } = response.data
        this.content = {
          ...this.content,
          ...content
        }
        console.log(this.content)
        this.$message({
          type: 'success',
          message: '查询成功'
        })
      })
    },
    editTextList(num, item) {
      this.textListChildrenNum = num
      this.textListChildren = { ...item }
      console.log(num)
    },
    removeTextList(index) {
      this.content.textList.children.splice(index, 1)
    },
    addTextListChildren() {
      if (this.textListChildren.title === '' || this.textListChildren.link === '' || this.textListChildren.brief_info === '') {
        this.$message({
          type: 'warning',
          message: '添加的数据都不能为空'
        })
        return
      }
      this.content.textList.children.push(this.textListChildren)
      this.textListChildrenNum = ''
      this.textListChildren = {
        title: '',
        link: '',
        brief_info: ''
      }
    },
    submitTextListChildren() {
      this.pushTextListChildren()
    },
    pushTextListChildren() {
      if (this.textListChildren.title === '' || this.textListChildren.link === '' || this.textListChildren.brief_info === '') {
        this.$message({
          type: 'warning',
          message: '添加的数据都不能为空'
        })
        return
      }
      if (this.textListChildrenNum === '') {
        this.content.textList.children.push(this.textListChildren)
      } else {
        this.content.textList.children.splice(this.textListChildrenNum, 1, this.textListChildren)
      }
      this.textListChildrenNum = ''
      this.textListChildren = {
        title: '',
        link: '',
        brief_info: ''
      }
    }
  }
}
</script>

<style scoped lang="scss">
.web-index-container{
  padding: 40px 50px 20px;
}
</style>
